<template name="signup">
<section id="signup" class="container content-section text-center">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2">
      <h3 class="page-header">Start Dining Out</h3>
      <p>Signup for a <strong>FREE 1 day trial</strong> of dineout.io today and start dining in the stratosphere. To get started, hit us up with an Email Address, Password, and your credit card details. Your card <strong>will not be charged</strong> until your trial ends!</p>
      <form id="application-signup" class="signup">
        <h4 class="page-header">Account details</h4>
        <div class="form-group">
          <label for="fullName">Full Name</label>
          <input type="text" name="fullName" class="form-control" placeholder="Full Name">
        </div> <!-- end .form-group -->
        <div class="form-group">
          <label for="emailAddress">Email Address</label>
          <input type="email" name="emailAddress" class="form-control" placeholder="Email Address">
        </div> <!-- end .form-group -->
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" name="password" class="form-control" placeholder="Password">
        </div> <!-- end .form-group -->
        <h4 class="page-header">Payment Information</h4>
        <label>Which plan sounds <em>amazing</em>?</label>
        {{>selectPlan}}
        <p class="alert alert-info"><strong>Jokes aside:</strong> to test out the credit card form, you can use the card number <strong>4242 4242 4242 4242 along with any future expiration month, year, and CVV</strong>. In one day, you'll receive an email from dineout.io confirming the end of your one day trial to showcase Stripe in action.</p>
        <div class="form-group">
          {{> Template.dynamic template="creditCard" data="signup"}}
        </div>
        <div class="form-group">
          <input type="submit" class="btn btn-success btn-block" data-loading-text="Setting up your trial..." style="margin-top: 40px; margin-bottom: 20px;" value="Put me on the rocketship">
          <p>After you click, we'll setup your account and start your trial. Again, <strong>your card will not be charged until your trial has ended</strong>.</p>
        </div> <!-- end .form-group -->
      </form>
    </div> <!-- end .col-xs-12 -->
  </div> <!-- end .row -->
</section>
</template>
